<template>
	<view :class="{'boxfixed' :reportSucca == true }">
		<comHeader :config="navConfig" />
		<view class="pleaseChoose">请选择举报原因：</view>
		<!-- <view class="itemall"  @change="radioChange" v-for="(item, index) in items" :key="item.value">
			<view class="items">
				<view class="title">{{item.name}}</view>
				<radio-group class="radioes">
					<view class="radio">
						<radio :value="item.value" :checked="index === current" style="transform:scale(0.7)"/>
					</view>
				</radio-group>
			</view>
			<view class="line"></view>
		</view> -->
		<radio-group class="itemall" @change="radioChange">
			<label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
				<view class="items">
					<view class="title">{{item.name}}</view>
					<view class="radio">
						<radio :value="item.value" :checked="index === current" style="transform:scale(0.7)" />
					</view>
				</view>
				<view class="line"></view>
			</label>
		</radio-group>

		<view class="report">举报补充说明：</view>
		<textarea name="comment" id="comment" placeholder="编辑内容..." placeholder-style="margin-left:21upx; margin-top:23upx; color:#CCCCCC"></textarea>

		<view class="give">提供详情图片：</view>
		<view @tap="addpic">
			<image class="img" src="../../static/addyj-tit.png" mode=""></image>
		</view>

		<view class="btn" @click="reportSucc"><text>提交</text></view>

		<report v-if='reportSucca' />
	</view>
</template>

<script>
	import report from '@/components/reportSuccess.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import edit from '@/components/wjx-edit/wjx-edit'
	// const recorderManager = uni.getRecorderManager();
	// const innerAudioContext = uni.createInnerAudioContext();

	// innerAudioContext.autoplay = true;
	export default {
		components: {
			uniIcon,
			edit,
			report
		},
		data() {
			return {
				modalHidden: true,
				reportSucca: false,
				navConfig: {
					comScroll: 0,
					isFixed: false, //是否absolute布局
					left: {

						isShowLeft: true,
						leftGobackColor: 'black', //左边返回icon颜色
					},
					mid: {
						isShowMid: true,
						text: '举 报'
					},
					right: {
						text: '',
						isShowRight: false,
					}
				},
				items: [{
						name: '广告'
					},
					{
						name: '色情'
					},
					{
						name: '政治有害'
					},
					{
						name: '图片/文章侵权'
					},
					{
						name: '身份作假'
					},
					{
						name: '其他（辱骂、恶意灌水等）'
					}
				],
				curTabIndex: 0,
				current: 0
			}
		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},

			//上传封面图片
			addpic() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: '',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						})
					}
				})
			},
			reportSucc() {
				this.reportSucca = true
			},
			// modalTap: function (e) {
			// 	uni.showModal({
			// 		// title: "/static/report.png",
			// 		img:'/static/report.png',
			// 		content: "我们非常重视您的举报，感谢您与我们一起维护本平台，我们将在一个工作日内进行审核，请耐心等待。",
			// 		showCancel: false,
			// 		confirmText: "完成"
			// 	})
			// },
		},

	}
</script>

<style>
	.pleaseChoose {
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: rgba(3, 21, 86, 1);
		line-height: 24upx;
		margin-left: 38upx;
		margin-top: 172upx;
		/* position: relative; */
	}

	.items {
		display: flex;
		flex-direction: row;
		/*控制方向 --*/
		justify-content: space-between;
		/*对齐方式*/
		/* align-items: center; */
		/*行高*/
	}

	.itemall {
		display: flex;
		flex-direction: column;
		/*控制方向 --*/
		margin-top: 34upx;
	}

	.line {
		width: 673upx;
		height: 1upx;
		opacity: 1;
		background: #E5E5E5;
		margin-left: 38upx;
		margin-top: 34upx;
		margin-bottom: 30upx;
	}

	.radio {
		margin-right: 39upx;
	}

	.title {
		margin-left: 38upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51, 51, 51, 1);
		margin-top: 10upx;
	}

	.report {
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: rgba(3, 21, 86, 1);
		line-height: 24upx;
		margin-left: 38upx;
		margin-top: 67upx;
	}

	#comment {
		width: 686upx;
		height: 288upx;
		/* background: rgba(255,255,255,1); */
		border-radius: 5upx 5upx 5upx 5upx;
		border: 1upx solid #E8E8E8;
		margin-left: 33upx;
		margin-top: 18upx;
	}

	.give {
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: rgba(3, 21, 86, 1);
		line-height: 24upx;
		margin-left: 38upx;
		margin-top: 67upx;
	}

	.img {
		width: 135upx;
		height: 135upx;
		margin-left: 34upx;
		margin-top: 33upx;
	}

	.btn {
		width: 652upx;
		height: 73upx;
		background: #F2F2F2;
		margin-left: 52upx;
		margin-top: 113upx;
		margin-bottom: 28upx;
		border-radius: 5upx;
	}

	.btn text {
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		margin-left: 299upx;
		margin-top: 18upx;
	}
	.boxfixed{
	  position: fixed;
	 }
</style>
